<template>
    <van-popup
            class="fullWin"
            v-model="visible"
            :closeable="false"
            close-icon="close"
            position="bottom"
    >

        <div class="wdp-8">
            <bpm-nav-bar title="选人" :leftArrow="true" @close="close"></bpm-nav-bar>

            <van-search shape="" background="#f3f3f3" placeholder="姓名/手机号"/>
            <van-nav-bar>
                <template #left>
                    <div v-for="(dept, index) in topDept" :key="dept.key">
                        <span @click="selectTop(index)">{{dept.title}}</span>
                        <van-icon name="arrow" v-if="index != topDept.length - 1"></van-icon>
                    </div>
                </template>

            </van-nav-bar>

            <van-nav-bar v-for="dept in subDept" :key="dept.key">
                <template #left>
                    <span @click="selectDept(dept)">{{ dept.title }}</span>
                </template>
                <template #right>
                    <van-icon name="arrow" @click="selectDept(dept)"></van-icon>
                </template>
            </van-nav-bar>

            <van-checkbox-group v-model="result" @change="checkUser">
                <van-cell v-for="user in subUser" :key="user.userKey">
                    <van-checkbox :name="user.userKey" shape="square">
                        <div class="member-list"><img src="../../../assets/image/user-images-1.jpg" width="60"
                                                      height="60">
                            {{user.name}}
                        </div>
                    </van-checkbox>
                </van-cell>
            </van-checkbox-group>
        </div>
        <div class="foot">
            <van-tabbar class="py-5">
                <van-tabbar-item @click="close">
                    <van-button icon="passed"></van-button>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </van-popup>
</template>

<script>

    import bpmNavBar from '../../../components/bpmNavBar';

    export default {
        name: 'flowOrgUserPopup',
        components: {
            bpmNavBar
        },
        props: {
            actorDeptList: {
                type: Array,
                default: () => [],
            },
            selected: {
                type: Array,
                default: () => [],
            },
            isRadio: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                visible: false,
                result: [],
                topDept: [],
                subDept: [],
                subUser: [],
                treeDataSource: [],
                url: {
                    getDeptTree: '/api/bpm/bpm-front/displayRest/getDeptTreeByDeptIds/v1',
                    getSubDeptTreeByDepartIdUrl: '/api/bpm/bpm-front/displayRest/getSubDeptTreeByDepartId/v1',
                    getUserListByDeptId: '/api/bpm/bpm-front/displayRest/getUserListByDeptId/v1',
                }
            }
        },
        methods: {
            show() {
                this.result = this.selected;
                this.topDept = [];
                this.subDept = [];
                this.subUser = [];
                this.treeDataSource = [];
                this.init();
                this.visible = true;
            },
            close() {
                this.visible = false;
            },
            init() {
                const deptArr = this.actorDeptList.map(item => item.id);
                this.$mask.open();
                this.$http.get(this.url.getDeptTree, {
                    params: {
                        deptIds: deptArr.join(',')
                    }
                }).then((res) => {
                    this.treeDataSource = res.result;
                    this.selectDept(this.treeDataSource[0]);
                }).catch(() => {
                    this.$notify({type: 'warning', message: '请求发生错误'});
                }).finally(() => {
                    this.$mask.close();
                });
            },
            selectTop(index) {
                if (index == this.topDept.length - 1) {
                    return;
                }
                this.topDept = this.topDept.filter((item, i) => i <= index);
                this.subDept = this.topDept[this.topDept.length - 1].children || [];
                this.subUser = this.topDept[this.topDept.length - 1].subUser || [];
            },
            selectDept(dept) {
                this.topDept = [
                    ...this.topDept, dept
                ];
                if (dept.children == null) {
                    this.loadDeptSync(dept);
                } else {
                    this.subDept = dept.children;
                }
                if (typeof dept.subUser == 'undefined') {
                    this.loadUserSync(dept);
                } else {
                    this.subUser = dept.subUser;
                }
            },
            loadDeptSync(dept) {
                this.$mask.open();
                this.$http.get(this.url.getSubDeptTreeByDepartIdUrl, {
                    params: {
                        departId: dept.value
                    }
                }).then((res) => {
                    dept.children = res.result || [];
                    this.subDept = dept.children;
                }).catch(() => {
                    this.$notify({type: 'warning', message: '请求发生错误'});
                }).finally(() => {
                    this.$mask.close();
                });
            },
            loadUserSync(dept) {
                this.$mask.open();
                this.$http.get(this.url.getUserListByDeptId, {
                    params: {
                        deptId: dept.value,
                    }
                }).then((res) => {
                    dept.subUser = res.result || [];
                    this.subUser = dept.subUser;
                }).catch(() => {
                    this.$notify({type: 'warning', message: '请求发生错误'});
                }).finally(() => {
                    this.$mask.close();
                });
            },
            checkUser(event) {
                const addUsers = this.subUser.filter(item => event.indexOf(item.userKey) != -1);
                const removeUsers = this.subUser.filter(item => event.indexOf(item.userKey) == -1);
                this.$emit("checkUser", addUsers, removeUsers);
                if (this.isRadio && event.length > 0) {
                    this.close();
                }
            }
        }
    }
</script>
